<template>
  <div class="CardDetails">
    <section class="section4">
      <div class="container" v-if="userInfo.user">
        <div class="row row-cols-1 row-cols-lg-2 d-flex justify-content-center aligin-items-center">
          <div class="col position-relative">
            <img class="img-fluid rounded-3 teacherImg" :src="userInfo.img" alt />
            <div class="num-tips position-absolute rounded-3">
              <div class="row">
                <div class="col-3">
                  <i class="bi bi-person-badge" style="font-size: 4em; color:#fff;"></i>
                </div>
                <div class="col-9 d-flex flex-column justify-content-evenly align-items-start">
                  <strong style="color: #fff; font-size:1.5em;">{{userInfo.name}}</strong>
                  <p style="color:#fff;">{{userInfo.user.address}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row">
              <h4 class="my-3">个人信息详情</h4>
              <p class="my-3">姓名：{{ userInfo.name }}</p>
              <p class="my-3">年龄：{{ userInfo.user.age }}</p>
              <p class="my-3">学历：{{ userInfo.education }}</p>
              <p class="my-3">服务类型：{{ userInfo.type }}</p>
              <p class="my-3">地址:{{ userInfo.user.address}}</p>
              <p class="my-3">联系方式:{{ userInfo.user.phone }}</p>
              <a
                href="#"
                @click="goHome"
                class="btn btn-primary btn-lg w-25 mt-2"
                style="font-size: 1.1em;"
              >返回</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import formatDateTimes from '@/assets/Tools/date2.js'
export default {
  data() {
    return {
      id: this.$route.params.id,
      userInfo: {},
    }
  },
  filters: {
    formatDate(val) {
      return formatDateTimes.formatDateTime(val)
    },
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const { data } = await this.$http.get('/nanny/info/' + this.id)
      if (data.code == 200) {
        this.userInfo = data.data
      }
      console.log(this.userInfo)
    },
    goHome() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less" scoped>
.CardDetails {
  height: 100vh;
  background: url(https://cdn.syjun.vip/background.png) no-repeat 100% 100%;
  .card {
    background: transparent;
    border: none !important;

    img {
      margin-top: 21%;
      max-height: 700px;
      padding-right: 30px;
      margin-right: 100px;
    }
  }
}
.section4 {
  margin-top: 150px;
}
.section4 .num-tips {
  bottom: 5%;
  left: -5%;
  width: 16.875rem;
  height: 5.9375rem;
  background-color: #4bb0f7;
}
p {
  text-indent: 2.2em;
  font-weight: 500;
}
.teacherImg {
  height: 500px;
}
</style>
